<template>
  <div class="rank-info-content">
    <div class="rank-banner-wrap">
      <img
        :src="imgurl.replace('{size}', '400')"
        alt="周杰棍"
        style="margin-top: -75px;width:100%;height:330px;overflow:hidden"
      >
    </div>

    <div class="intor-box" :class="{'auto':hideDesc}">
      <p>{{intro}}</p>
      <!-- <p style="display:none;">这里我想做成弹窗</p> -->
      <span class="intro-icon-box">
        <img src="../assets/images/close_icon.png" alt @click="show" v-if="hideDesc">
        <img src="../assets/images/open_icon.png" alt @click="show" v-else>
      </span>
    </div>
    <div class="panel-songslist">
      <mt-cell
        class="panel-songslist-item"
        v-for="(item,index) in songList"
        :title="item.filename"
        @click.native="playAudio(index)"
        :key="index"
      >
        <img slot="icon" src="../assets/images/download_icon.png">
      </mt-cell>
    </div>
  </div>
</template>
<script>
import { getSingers } from "@/api";
import { PLAY_AUDIO } from "@/mixins";
import { Indicator } from "mint-ui";
export default {
  mixins: [PLAY_AUDIO],
  data() {
    return {
      songList: [],
      imgurl: "",
      intro: "",
      hideDesc: false,
      opacity: 0
    };
  },
  // mounted () {

  // },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$store.commit("showHead", true);
      vm.$store.commit("showTitle", true);
      // vm.get()
      vm.$refs;
      window.onscroll = () => {
        vm.opacity = window.pageYOffset / 250;
        vm.$store.commit("setHeadStyle", {
          background: `-webkit-linear-gradient(top,rgba(75, 67, 67,${
            vm.opacity
          }),rgba(0,0,0,0))`
        });
      };
      vm.getSongs();
    });
  },
  beforeRouteLeave(to, from, next) {
    this.$store.commit("showHead", false);
    this.$store.commit("showTitle", false);
    window.onscroll = null;
    next();
  },
  methods: {
    getSongs() {
      Indicator.open({
        text: "客官请稍等...",
        spinnerType: "snake"
      });
      var singerID = this.$route.params.id;
      getSingers(singerID).then(({ data }) => {
        // console.log(data);
        Indicator.close();
        this.songList = data.songs.list;
        this.imgurl = data.info.imgurl;
        this.intro = data.info.intro;
        this.$store.commit("setHeadTitle", data.info.singername);
        //  console.log(data)
      });
    },
    show() {
      // console.log(1)
      this.hideDesc = !this.hideDesc;
    }
  }
};
</script>
<style scoped>
</style>

